<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>主页 | HOME</title>
    <meta name="keywords" content="SEO关键词" />
    <meta name="description" content="SEO内容描述" />
    <!-- layui引入 -->
    <link rel="stylesheet" href="js/layui/css/layui.css" />
    <link rel="stylesheet" href="js/layui/css/modules/layer/default/layer.css" />
    <!-- swiper引入 -->
    <link rel="stylesheet" href="js/swiper/dist/css/swiper.min.css">
    <!-- reset公共样式 -->
    <link rel="stylesheet" href="css/bootstrap.css" />
    <!-- css动画效果 -->
    <link rel="stylesheet" href="css/animate.min.css">
    <!-- 当前页css样式 -->
    <link rel="stylesheet" href="css/home.css" />
    <!-- jquery引入 -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <!-- 滚动监听引入 -->
    <script type="text/javascript" src="js/jquery.waypoints.min.js"></script>
    <script type="text/javascript" src="js/sticky.min.js"></script>
    <script type="text/javascript" src="js/infinite.min.js"></script>
    <script type="text/javascript" src="js/inview.min.js"></script>
</head>

<body>
    <!-- 顶部导航 -->
    <header class="header">
        <div class="header-box">
            <h1 class="logo">
                <a href="javascript:void(0);" onclick="goTop();"></a>
            </h1>
            <nav class="nav-bar">
                <ul>
                    <li>
                        <a href="javascript:void(0);" onclick="goTop();">首页</a>
                    </li>
                    <li>
                        <a href="#about" onclick="about()">关于我</a>
                    </li>
                    <li>
                        <a href="#project" onclick="project()">参与项目</a>
                    </li>
                    <li>
                        <a href="#works" onclick="works()">作品展示</a>
                    </li>
                    <li>
                        <a href="#skills" onclick="skills()">技能概况</a>
                    </li>
                    <div class="clear-both"></div>
                </ul>
            </nav>
            <div class="clear-both"></div>
        </div>
    </header>
    <!-- 主体内容 -->
    <div class="main">
        <!-- banner轮播 -->
        <div class="banner banner-bg">
            <div id="scroll-one"></div>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="banner-middle">
                            <div class="banner-content">
                                <div class="banner-bimg">
                                    <img src="images/banner/banner-one-lf.jpg" />
                                </div>
                                <div class="banner-img">
                                    <div class="banner-title">
                                        <div class="title-one">因为热爱 所以执着</div>
                                        <div class="title-two">BECAUSE OF LOVE</div>
                                        <div class="title-three">SO PRESISTENT</div>
                                        <p>过去的事，交给岁月去处理。</p>
                                        <p>将来的事，留给时间去证明。</p>
                                    </div>
                                    <img src="images/banner/banner-one.jpg" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="banner-middle">
                            <div class="banner-content">
                                <div class="banner-bimg">
                                    <img src="images/banner/banner-two-lf.jpg" />
                                </div>
                                <div class="banner-img">
                                    <div class="banner-title title-tp20">
                                        <div class="title-one">不得过且过 不人云亦云</div>
                                        <div class="title-two title-mg20">NEW START</div>
                                        <p>设计没有很好，前路还有很长。</p>
                                        <p>每个阶段，都是新的起点。</p>
                                    </div>
                                    <img src="images/banner/banner-two.jpg" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div id="about"></div>
        <!-- 关于我/工作内容 -->
        <div class="article terminal">
            <div class="middle">
                <h5>Work Content</h5>
                <div class="terminal-line"></div>
                <div class="content">
                    <ul>
                        <li>
                            <img src="images/web.png" />
                            <label>Web</label>
                            <p>PC端系统操作界面设计</p>
                        </li>
                        <li>
                            <img src="images/app.png" />
                            <label>APP</label>
                            <p>手持端应用程序界面设计</p>
                        </li>
                        <li>
                            <img src="images/illustration.png" />
                            <label>Illustration</label>
                            <p>商业矢量插画设计</p>
                        </li>
                        <div class="clear-both"></div>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 个人信息 -->
        <div class="article about">
            <div class="middle">
                <div class="about-lf">
                    <img src="images/me.jpg" />
                </div>
                <div class="about-rg">
                    <div class="about-rg-top">
                        <h5>ABOUT ME <span>倪泽琪</span></h5>
                        <h6>Designer</h6>
                        <p>数字艺术设计本科毕业8年，设计行业工作5年，从事过电商、培训、互联网行业。现在的我更明确自己想要什么该做什么，不想荒废人生不想碌碌无为。每个阶段都是新的开始，希望在以后的工作中能与公司共同成长、进步。
                        </p>
                    </div>
                    <div class="about-rg-bottom">
                        <ul>
                            <li>
                                <i class="icon-email"></i> miyako_ni@163.com
                            </li>
                            <li>
                                <i class="icon-tell"></i> 17502527229
                            </li>
                            <li>
                                <i class="icon-wechat"></i> nzq1988
                            </li>
                            <div class="clear-both"></div>
                        </ul>
                        <div class="about-skills">
                            <div class="about-skills-title">
                                <label>SKILLS</label>
                                <span>84%</span>
                                <div class="clear-both"></div>
                            </div>
                            <div class="skills-line-bg">
                                <div class="skills-line"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clear-both"></div>
            </div>
        </div>

        <!-- 参与项目 -->
        <div id="project"></div>
        <div class="article project">
            <div class="middle">
                <div class="project-lf">
                    <h5>PROJECT <span>参与项目</span></h5>
                    <h6>南京莱斯信息</h6>
                    <ul>
                        <li>
                            <label>2017/03-2018/02</label><span>开封市智慧城市</span>
                            <div class="clear-both"></div>
                        </li>
                        <li>
                            <label>2017/04-2017/05</label><span>危化品企业购销使用废弃跟踪预警系统</span>
                            <div class="clear-both"></div>
                        </li>
                        <li>
                            <label>2017/05-2017/11</label><span>江苏省安监非煤矿山企业安全生产许可</span>
                            <div class="clear-both"></div>
                        </li>
                        <li>
                            <label>2017/08-2017/09</label><span>莱斯物联网智能感知系统</span>
                            <div class="clear-both"></div>
                        </li>
                        <li>
                            <label>2017/10-2018/02</label><span>福建省安全生产应急平台</span>
                            <div class="clear-both"></div>
                        </li>
                        <li>
                            <label>2017/11-2017/12</label><span>江苏省安监非煤矿山企业安全生产许可</span>
                            <div class="clear-both"></div>
                        </li>
                        <li>
                            <label>2018/01-2018/02</label><span>吴中安监</span>
                            <div class="clear-both"></div>
                        </li>
                        <li>
                            <label>2018/01-2018/02</label><span>海门三厂重大危险源监控平台</span>
                            <div class="clear-both"></div>
                        </li>
                        <li>
                            <label>2018/04-2018/08</label><span>莱芜市智慧城市</span>
                            <div class="clear-both"></div>
                        </li>
                        <li>
                            <label>2018/05-2019/02</label><span>上饶智慧城市应急指挥</span>
                            <div class="clear-both"></div>
                        </li>
                        <li>
                            <label>2018/09-2019/03</label><span>成都市智慧治理中心</span>
                            <div class="clear-both"></div>
                        </li>
                        <div class="clear-both"></div>
                    </ul>
                </div>
                <div class="project-rg">
                    <img src="images/iphone.png" />
                </div>
                <div class="clear-both"></div>
            </div>
        </div>
        <!-- 作品集/分类 -->
        <div id="works"></div>
        <div class="article works">
            <div class="middle">
                <h5>Portfolio</h5>
                <ul class="works-tabs" id="tabimg">
                    <li>
                        <span class="active" onclick="tab(0,this)">ALL</span>
                    </li>
                    <li>
                        <span onclick="tab(1,this)">LARGE SCREEN</span>
                    </li>
                    <li>
                        <span onclick="tab(2,this)">APP</span>
                    </li>
                    <li>
                        <span onclick="tab(3,this)">WEB</span>
                    </li>
                    <li>
                        <span onclick="tab(4,this)">PRACTICE</span>
                    </li>
                </ul>
                <div class="works-img">
                    <ul class="image-list">
                        <li id="1">
                            <img src="images/works/1.jpg" onclick="imgbox(0);" />
                        </li>
                        <li id="2">
                            <img src="images/works/2.jpg" onclick="imgbox(1);" />
                        </li>
                        <li id="3">
                            <img src="images/works/3.jpg" onclick="imgbox(2);" />
                        </li>
                        <li id="4">
                            <img src="images/works/4.jpg" onclick="imgbox(3);" />
                        </li>
                        <li id="5">
                            <img src="images/works/5.jpg" onclick="imgbox(4);" />
                        </li>
                        <li id="6">
                            <img src="images/works/6.jpg" onclick="imgbox(5);" />
                        </li>
                        <li id="7">
                            <img src="images/works/7.jpg" onclick="imgbox(6);" />
                        </li>
                        <li id="8">
                            <img src="images/works/8.jpg" onclick="imgbox(7);" />
                        </li>
                        <li id="9">
                            <img src="images/works/9.jpg" onclick="imgbox(8);" />
                        </li>
                        <li id="10">
                            <img src="images/works/10.jpg" onclick="imgbox(9);" />
                        </li>
                        <li id="11">
                            <img src="images/works/11.jpg" onclick="imgbox(10);" />
                        </li>
                        <li id="12">
                            <img src="images/works/12.jpg" onclick="imgbox(11);" />
                        </li>
                        <li id="13">
                            <img src="images/works/13.jpg" onclick="imgbox(12);" />
                        </li>
                        <li id="14">
                            <img src="images/works/14.jpg" onclick="imgbox(13);" />
                        </li>
                        <li id="15">
                            <img src="images/works/15.jpg" onclick="imgbox(14);" />
                        </li>
                        <li id="16">
                            <img src="images/works/16.jpg" onclick="imgbox(15);" />
                        </li>
                        <li id="17">
                            <img src="images/works/17.jpg" onclick="imgbox(16);" />
                        </li>
                        <li id="18">
                            <img src="images/works/18.jpg" onclick="imgbox(17);" />
                        </li>
                        <li id="19">
                            <img src="images/works/19.jpg" onclick="imgbox(18);" />
                        </li>
                        <li id="20">
                            <img src="images/works/20.jpg" onclick="imgbox(19);" />
                        </li>
                        <li id="21">
                            <img src="images/works/21.jpg" onclick="imgbox(20);" />
                        </li>
                        <li id="22">
                            <img src="images/works/22.jpg" onclick="imgbox(21);" />
                        </li>
                        <li id="23">
                            <img src="images/works/23.jpg" onclick="imgbox(22);" />
                        </li>
                        <li id="24">
                            <img src="images/works/24.jpg" onclick="imgbox(23);" />
                        </li>
                        <div class="clear-both"></div>
                    </ul>
                </div>
                <div class="works-more" id="loadMore">
                    Load more <i class="icon-more"></i>
                </div>
                <div></div>
            </div>
        </div>
        <!-- 技能熟练度 -->
        <div id="skills"></div>
        <div class="article skills">
            <div class="middle">
                <h5 class="skills-title">Skill level</h5>
                <div class="skills-list">
                    <ul>
                        <li>
                            <div class="skill-lf">
                                <img src="images/ps.jpg" />
                            </div>
                            <div class="skill-rg">
                                <h5>PHOTOSHOP</h5>
                                <ul>
                                    <li class="stars"></li>
                                    <li class="stars"></li>
                                    <li class="stars"></li>
                                    <li class="stars"></li>
                                    <li class="stars-empty"></li>
                                    <div class="clear-both"></div>
                                </ul>
                                <p>设计过程中使用最多，也是最熟练的图形软件。因其功能强大，不保证100%全能，工作项目需求都可良好独立完成。</p>
                            </div>
                            <div class="clear-both"></div>
                        </li>
                        <li>
                            <div class="skill-lf">
                                <img src="images/ai.jpg" />
                            </div>
                            <div class="skill-rg">
                                <h5>ILLUSTRATOR</h5>
                                <ul>
                                    <li class="stars"></li>
                                    <li class="stars"></li>
                                    <li class="stars"></li>
                                    <li class="stars"></li>
                                    <div class="clear-both"></div>
                                </ul>
                                <p>多用于插画、icon等矢量图形的制作。相较于ps而言使用频率并没有那么高，但是也能熟练的运用在日常设计中。</p>
                            </div>
                            <div class="clear-both"></div>
                        </li>
                        <li>
                            <div class="skill-lf">
                                <img src="images/ae.jpg" />
                            </div>
                            <div class="skill-rg">
                                <h5>AFTER EFFECTS</h5>
                                <ul>
                                    <li class="stars"></li>
                                    <li class="stars"></li>
                                    <li class="stars"></li>
                                    <div class="clear-both"></div>
                                </ul>
                                <p>AE是大学期间就在学习的软件，专业主要方向是动画，前公司对动画类的需求并不大所以实践较少，相对PS、AI的熟练度较弱。</p>
                            </div>
                            <div class="clear-both"></div>
                        </li>
                        <li>
                            <div class="skill-lf">
                                <img src="images/sk.jpg" />
                            </div>
                            <div class="skill-rg">
                                <h5>SKETCH</h5>
                                <ul>
                                    <li class="stars"></li>
                                    <li class="stars"></li>
                                    <li class="stars"></li>
                                    <div class="clear-both"></div>
                                </ul>
                                <p>这款软件上线时间并不长，因为其交互效果的制作相较而言更便捷被广为运用。使用熟练度不如其他软件但是也能完成所需内容。</p>
                            </div>
                            <div class="clear-both"></div>
                        </li>
                        <div class="clear-both"></div>
                    </ul>
                </div>
            </div>
        </div>
        <!-- top滚动 -->
        <div class="scrollTop" onclick="goTop();">
            <img src="images/top.png" />
        </div>
    </div>
    <!-- 底部栏目导航 -->
    <footer class="footer">
        <div class="footer-box">
            <ul class="footer-lf">
                <li><label>Tel：</label><span>17502527992</span></li>
                <li><label>WeChat：</label><span>nzq1988</span></li>
                <div class="clear-both"></div>
            </ul>
            <div class="footer-ct">
                <img src="images/footer/logo.jpg" />
            </div>
            <ul class="footer-rg">
                <li>
                    <a href="javascript:void(0);" onclick="goTop();">首页</a>
                </li>
                <li>
                    <a href="#about" onclick="about()">关于我</a>
                </li>
                <li>
                    <a href="#project" onclick="project()">参与项目</a>
                </li>
                <li>
                    <a href="#works" onclick="works()">作品展示</a>
                </li>
                <li>
                    <a href="#skills" onclick="skills()">技能概况</a>
                </li>
                <div class="clear-both"></div>
            </ul>
            <div class="clear-both"></div>
        </div>
    </footer>
    <!-- layui引入 -->
    <script type="text/javascript" src="js/layui/layui.all.js"></script>
    <script type="text/javascript" src="js/layui/lay/modules/layer.js"></script>
    <!-- swiper引入 -->
    <script type="text/javascript" src="js/swiper/dist/js/swiper.min.js"></script>
    <!-- 当前页js文件 -->
    <script type="text/javascript" src="js/home.js"></script>
</body>

</html>